<template>
    <div>
        <span @click="add" class="add">添加分类</span>
        <el-table :data="sp.result" style="width: 100%" height="70vh" row-key="cat_id"  border>
          <el-table-column prop="xh" type="" width="50"></el-table-column>
          <!-- <el-table-column></el-table-column> -->
          <el-table-column  label="分类名称" width="300">
            <template slot-scope="scope">{{ scope.row.cat_name}}</template>
          </el-table-column>
          <el-table-column  label="是否有效" width>
            <span class="el-icon-success"></span>
          </el-table-column>
          <el-table-column label="排序">
            <template slot-scope="scope">
                <span class="dj" :style="scope.row.cat_level+1==1?'background-color:#ECF5FF;color:#1c7dec;':scope.row.cat_level+1==2?'background-color:#F0F9EB;color:#8CD16A;':'background-color:#FDF6EC;color:#E6A23C;'">{{scope.row.cat_level+1==1?'一':scope.row.cat_level+1==2?'二':'三'}}级</span>
            </template>
          </el-table-column>
          <el-table-column  label="操作">
            <template scope="scope">
                <span @click="bj(scope.row)" style="background-color:#409EFF;" class="bianji">
                    <em class="el-icon-edit"></em>&nbsp;&nbsp;编辑
                </span>
                
                <span @click="shanchu(scope.row)" style="background-color:#F56C6C ;" class="bianji">
                   <em class="el-icon-delete"></em>&nbsp; 删除
                </span>
            </template>
          </el-table-column>
      </el-table>
      <el-pagination
            @current-change="handleCurrentChange"
            layout="total, sizes, prev, pager, next, jumper"
            :total="sp.total"
            :current-page="1"
            :page-sizes="[2]"
            :page-size="6">
        </el-pagination>

        <el-dialog  title="编辑分类" :visible.sync="dialogFormVisible">
                        <el-form :model="bjxx">
                            <el-form-item label="分类名称" :label-width="formLabelWidth">
                                <el-input v-model="bjxx.cat_name" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取 消</el-button>
                                <el-button type="primary" @click="bjcg">确 定</el-button>
                        </div>
        </el-dialog>
        <el-dialog  title="添加分类" :visible.sync="dialogFormVisible1">
                        <el-form :model="bjxx">
                            <el-form-item label="选择父级分类" :label-width="formLabelWidth"  >
                                    <el-select 
                                    v-model="value1" 
                                    placeholder="请选择父级分类" 
                                    ref="selectTree" >
                                    <el-option @click.native="ko" :value="0">0</el-option>
                                    <el-option
                                     :key="bjxx.cat_name" 
                                     :value="bjxx.id" 
                                     :label="bjxx.cat_name" 
                                     hidden/>
                                    <el-tree :data="sp2"
                                        :props="defaultProps"
                                        node-key="id"
                                        accordion
                                        highlight-current
                                        @node-click="handleNodeClick"/>
                                    </el-select>
                            </el-form-item>
                            <el-form-item label="分类名称" :label-width="formLabelWidth">
                                <el-input v-model="bjxx.cat_name" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item  label="分类层级" :label-width="formLabelWidth">
                                <el-input :disabled="true" :value="bjxx.cat_level==0?'一级':bjxx.cat_level==1?'二级':bjxx.cat_level==2?'三级':'四级'"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                                <el-button type="primary" @click="tjcg">确 定</el-button>
                        </div>
        </el-dialog>
    </div>
</template>

<script>
import {spflrequest,bjflrequest,shanchurequest,tjsprequest} from '../../../request/api/goods/spfl'
export default {
    data(){
        return{
            spfl:{
                pagenum:1,
                pagesize:2,
            },
            sp:[],
            sp2:[],
            defaultProps: {
                children: 'children',
                label: 'cat_name'
            },
            bjxx:{
                id:'',
                cat_pid:0,
                cat_name:'',
                cat_level:0
            },
            formLabelWidth:"120px",
            dialogFormVisible:false,
            dialogFormVisible1:false,
            value1:'',
        }
    },
    created(){
        this.fb()
    },
    methods:{
        fb(){
            spflrequest(this.spfl).then(res=>{
                this.sp=res.data.data
                console.log(res);
                this.sp.result.map((item,i)=>{
                        item.xh=i+1           
                })
                console.log(this.sp.result);
            })
        },
        ko(){
            this.bjxx.cat_level=0
        },
        handleCurrentChange(val) {
            // 改变默认的页数
            this.spfl.pagenum=val
            this.fb()
        },
        bj(x){
            this.dialogFormVisible=true
            console.log(x);
            this.bjxx.id=x.cat_id
            this.bjxx.cat_name=x.cat_name
        },
        bjcg(){
            bjflrequest(this.bjxx).then(res=>{
                if(res.data.meta.status==200){
                    this.dialogFormVisible=false
                    this.fb()
                }else{
                    alert('编辑失败')
                }
            })
        },
        tjcg(){
            if(this.bjxx.cat_level>2){
                alert('不能添加四级分类')
            }else{
                tjsprequest(this.bjxx).then(res=>{
                if(res.data.meta.status==201){
                    this.dialogFormVisible1=false
                    this.bjxx.cat_name=''
                    this.fb()
                }else{
                    alert('添加失败')
                }
                })
            }
            
            
        },
        shanchu(x){
            shanchurequest(x.cat_id).then(res=>{
                if(res.data.meta.status==200){
                    this.fb()
                }else{
                    alert('删除失败')
                }
            })
        },
        add(){
            this.dialogFormVisible1=true
            spflrequest().then(res=>{
                this.sp2=res.data.data
            })
        },
        handleNodeClick (data) {
            this.value1=data.cat_name
            this.bjxx.cat_level=data.cat_level+1
            this.bjxx.cat_pid=data.cat_id
            console.log(data)
            // 使 input 失去焦点，并隐藏下拉框
            this.$refs.selectTree.blur()
        },
        cengji(i){
            this.value1=i
            this.bjxx.cat_level=i
        },
    }
}
</script>

<style scoped>
    .el-icon-success{
        font-size: 21px;
        color: #57ed57;
    }
    .dj{
        display: inline-block;
        width: 35px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        border-radius: 5px;
        border: 1px solid #d0d0d0;

    }
    .bianji{
        display: inline-block;
        width: 85px;
        border-radius: 5px;
        margin-left: 10px;
        height: 30px;
        line-height: 30px;
        border: 1px solid #d0d0d0;
        text-align: center;
        cursor: pointer;
        color: white;
    }
    .add{
        width: 180px;
        height: 40px;
        display: inline-block;
        border: 1px solid #c0c0c0;
        border-radius: 3px;
        cursor: pointer;
        vertical-align: top;
        text-align: center;
        line-height: 40px;
        background-color: #1f89f3;
        color:white;
        margin-bottom: 20px;
    }
</style>